<template>
  <div class="container setCouponss">
    <div class="coupons-list">
      <ant-coupons :data="couponss"></ant-coupons>
    </div>
    <i-load-more tip="效果预览" :loading="false" />
    <div class="couponss-form">
      <div class="couponss-form-header">
        <div class="title">
          <div class="icon"></div>
          <p>设置
          </p>
        </div>
        <div class="more" @click="$router.push({ path: '/pages/coupons/coupons',query: { type: 'store' }})">查看已发布优惠券</div>
      </div>
      <div class="couponss-form-body">
        <i-panel>
          <i-input :value="name" @change="change($event,'name')" title="名称" right required placeholder="请输入优惠券名称" />
          <i-input :value="createnum" @change="change($event,'createnum')" title="使用门槛" right required after="元"
            placeholder="请输入使用门槛" />
          <i-input :value="money" @change="change($event,'money')" title="优惠金额" right required after="元" placeholder="请输入优惠金额" />
          <i-input :value="condition" @change="change($event,'condition')" title="发行量" right required after="张"
            placeholder="请输入发行量" />
        </i-panel>
        <div class="blank-spaces"></div>
        <i-panel>
          <picker mode="date" :value="use_start_time" @change="changeDate($event,'use_start_time')">
            <i-input :value="use_start_time" disabled title="使用时间-起" right required placeholder="请选择开始使用时间" />
          </picker>
          <picker mode="date" :value="use_end_time" @change="changeDate($event,'use_end_time')">
            <i-input :value="use_end_time" disabled title="使用时间-止" right required placeholder="请选择结束使用时间" />
          </picker>

        </i-panel>
      </div>
    </div>
    <div class="add-address" @click="addAndEditCoupon">保存</div>
    <i-toast id="toast" />
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from "Vuex";
  // 依赖
  const {
    $Toast
  } = require("@/../static/iview/base/index");
  import Dialog from "@/../static/vant/dialog/dialog";
  import AntCoupons from '@/components/coupons'
  import request from "@/api/request";
  export default {
    components: {
      AntCoupons
    },
    data() {
      return {
        couponss: {
          name: "家家访旗舰店优惠券", //优惠券名称
          money: "88", //抵用金额
          condition: "999", //满金额
          use_start_time: "1541356532", //截止时间错
          use_end_time: "1546246532", //截止时间错
        },
        name: null,
        createnum: null,
        money: null,
        condition: null,
        condition: null,
        use_start_time: null,
        use_end_time: null,
        error: false,
      };
    },
    computed: {
      ...mapState([])
    },
    methods: {
      ...mapMutations([]),
      changeDate(e, target) {
        this[target] = e.mp.detail.value
      },
      change(e, key) {
        this[key] = e.mp.detail.detail.value
        console.log(e.mp.detail.detail.value)
      },
      isError(state, error) {
        if (this.error) {
          return
        }
        if (!state) {
          this.error = true
          $Toast({
            content: error,
            type: 'error'
          });
          return
        }
        this.error = false
      },
      addAndEditCoupon() {
        this.isError(this.name, '请输入优惠券名称')
        this.isError(this.createnum, '请输入使用门槛')
        this.isError(this.money, '请输入优惠金额')
        this.isError(this.condition, '请输入发行量')
        this.isError(this.use_start_time, '请选择开始使用时间')
        this.isError(this.use_end_time, '请选择结束使用时间')
        if (!this.error) {
          const {
            name,
            money,
            createnum,
            condition,
            use_start_time,
            use_end_time,
          } = this
          request.addAndEditCoupon({
            name,
            money: parseFloat(money),
            createnum: parseFloat(createnum),
            condition: parseFloat(condition),
            use_start_time,
            use_end_time,
          }).then(res => {
            console.log(res)
            $Toast({
              content: res.message,
              type: res.code == 0 ? "success" : "warning"
            });
            Dialog.confirm({
                title: '优惠券已保存',
                message: '是否继续添加'
              })
              .then(() => {
                // on confirm
                this.name = null;
                this.createnum = null;
                this.money = null;
                this.condition = null;
                this.use_start_time = null;
                this.use_end_time = null;
                this.error = false;
              })
              .catch(() => {
                console.log("取消");
                // on cancel
                this.$router.back()
              });
          }).catch(res => {
            console.log(res)
            $Toast({
              content: res.message,
              type: res.code == 0 ? "success" : "warning"
            });
          })
        }
      }
    },
    mounted() {

    }
  };

</script>

<style lang="less">
  .coupons-list {
    padding: 15px;

    .coupons {}
  }

  .couponss-form {
    margin-top: -15px;

    .couponss-form-header {
      padding: 0 15px 15px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .title {
        display: flex;
        align-items: center;

        .icon {
          display: block;
          width: 4px;
          height: 18px;
          background: #ee7559;
          border-radius: 2px;
        }

        p {
          margin-left: 10px;
          font-size: 18px;
          line-height: 1em;
          color: #333333;
        }
      }

      .more {
        font-size: 12px;
        line-height: 1em;
        color: #EE7559;
      }
    }

    .couponss-form-body {
      padding: 0;
      font-size: 0;
      background: #fff;

      &.info {
        padding: 0;
      }

      img {
        width: 100%;
      }
    }
  }

</style>
